<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>新建服务日志</title>
    <meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="{$Think.config.RESOURCEURL}wx_assets/css/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <script src="{$Think.config.RESOURCEURL}wx_assets/personCenter/js/mediaQuery.min.js{$Think.config.RESOURCE_VER}"></script>
    <script type='text/javascript' src='{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js{$Think.config.RESOURCE_VER}'></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}"></script>
    <style>
        body {
            padding: .2rem;
        }
        p {
            margin-bottom: .2rem;
            position: relative;
        }
        input {
            -webkit-appearance:none;
        }
        input,button,select,textarea{
            outline:none;
            background-color: transparent;
            border-color: #ccc;
        }
        /*textarea{*/
            /*resize:none;*/
        /*}*/
        label {
            display: inline-block;
            font-size: .32rem;
            color: #4c4c4c;
            float: left;
            height: .72rem;
            line-height: .72rem;
        }
        select {
            display: inline-block;
            width: 70%;
            font-size: .28rem;
            color: #808080;
            float: left;
            height: .72rem;
            line-height: .72rem;
            border-radius: .06rem;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            padding-left: .1rem;
            appearance:none;
            -webkit-appearance:none;
            overflow: hidden;
            padding-right: .5rem;
            /*background: url({$Think.config.RESOURCEURL}wx_assets/service/images/service_down.png) 96% center no-repeat;*/
            /*background-size: .27rem .15rem;*/
        }
        option {
            /*padding: 0;*/
        }
        textarea{
            display: block;
            width: 98%;
            min-height: 2.3rem;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            color: #808080;
            font-size: .28rem;
            border-radius: .06rem;
            /*text-indent: .56rem;*/
            padding: .2rem;
        }
        ul {
            font-size: 0;
        }
        ul li {
            width: 33.3%;
            border-radius: .05rem;
            display: inline-block;
            position: relative;
            height: 1.4rem;
            margin-top: .15rem;
            box-sizing: border-box;
            padding: 0 15px;
        }
        ul li div{
            position: relative;
            width: 100%;
            height: 100%;
        }
        ul li img{
            position: absolute;
            max-height: 100%;
            max-height: 100%;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
        }
        a.tj {
            margin: 1rem .2rem .6rem;
            display: block;
            background-color: #f75493;
            color: #fff;
            font-size: .38rem;
            height: .7rem;
            line-height: .7rem;
            text-align: center;
            border-radius: .08rem;
        }

        @font-face {
            font-family: 'iconfont';
            src: url('//at.alicdn.com/t/font_1475121325_247299.eot'); /* IE9*/
            src: url('//at.alicdn.com/t/font_1475121325_247299.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('//at.alicdn.com/t/font_1475121325_247299.woff') format('woff'), /* chrome、firefox */
            url('//at.alicdn.com/t/font_1475121325_247299.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('//at.alicdn.com/t/font_1475121325_247299.svg#iconfont') format('svg'); /* iOS 4.1- */
        }
        .icon {
            font-family: iconfont;
            font-size: .3rem;
            position: absolute;
            top: 36%;
            left: 88%;
            color: #808080;
        }
        .delImg{
            width: .4rem;
            display: block;
            height: .4rem;
            z-index: 2;
            transform: translate(50%,-50%);
            -webkit-transform: translate(50%,-50%);
            right: 0 ;
            position: absolute ;
            background: url({$Think.config.RESOURCEURL}wx_assets/service/images/day_img_del.gif) 100% center no-repeat;
            background-size: 100%;
        }
    </style>
</head>
<body>
    <p class="clearfix">
        <label for="obj">服务对象：</label>
        <select name="" id="obj">
            <option value="all">所有人</option>
            <volist name="division" id="divisions">
                <option value="{$divisions.id}">{$divisions.name}</option>
            </volist>
        </select>
        <i class="icon">&#xe602;</i>
    </p>
    <p class="clearfix">
        <label for="kind">服务类别：</label>
        <select name="" id="kind">
            <volist name="type" id="types">
                <option value="{$types.id}">{$types.name}</option>
            </volist>
        </select>
        <i class="icon">&#xe602;</i>
    </p>
    <label>输入服务内容：</label>
    <!--<input type="text" placeholder="请输入你想要的服务内容...">-->
    <textarea id="content" placeholder="请输入服务内容..."></textarea>
    <label style="display: block;float: none">上传图片（数量不限）：</label>
    <ul id="images">
        <li class="ad">
            <div>
                <img src="{$Think.config.RESOURCEURL}wx_assets/service/images/service_new.png" alt="">
            </div>
        </li>
    </ul>
    <a class="tj">提交</a>
</body>
<script>
    var baseUrl = '{$Think.config.SERVER_HOST}';
    var newMessage={
        init:function(){
            this._initEvent();
        },
        _delImg:function(ctl){
            $(ctl).parents("li").remove();
        },
        _initEvent:function(){
            var me = this;
            $(".ad").click(function(){
                var upload = $(this);
                var img = upload.find('img');
                wx_share.uploadImage(function(data){
                    var path = data.path;
                    var str = '<li><div><img class="messageImg" data-url="'+path+'" src="'+path+'@100w_100h_1e_1c_100sh" alt=""><a class="delImg" onclick="newMessage._delImg(this)"></a></div></li>';
                    upload.before(str);
                });
            });
            $(".tj").click(function(){
                var allPerson=0;
                var divisionId= $("#obj").val();
                if(divisionId=='all'){
                    allPerson=1;
                    divisionId=0;
                }
                var imgs=new Array(0);
                $(".messageImg").each(function(){
                    imgs.push($(this).data("url"));
                });
                $.util.pageLoading.show();
                $.req.get("call.json?customerId={$customerId}&module=services&method=saveServices",{
                    params:{
                        "managerId":"{$managerId}",
                        "typeId":$("#kind").val(),
                        "divisionId":divisionId,
                        "content":$("#content").val(),
                        "image":imgs.join(","),
                        "allPerson":allPerson
                    }
                },function(data){
                    if(data && !data.code){
                        location.href= baseUrl+'call.html?customerId={$customerId}&module=services&method=servicesCondition';
                    }
                });
            });
        }
    }
    newMessage.init();
</script>
<script>
    wx_share.init({
        "pkg":{
            "appId": '{$pkg.appId}',
            "timestamp": '{$pkg.timestamp}',
            "nonceStr": '{$pkg.nonceStr}',
            "signature": '{$pkg.signature}'
        },
        hide:1
    });
</script>
</html>